<template>
    <div>
      <div class="container">
        <el-row :gutter="10">
          <el-col :span="5"> <el-select v-model="query.status" filterable clearable placeholder="请选择状态">
              <el-option :label="'正常'" :value="0"> 正常</el-option>
              <el-option :label="'禁用'" :value="1"> 禁用</el-option>
            </el-select></el-col>
          <el-col :span="5"> <el-input v-model="query.name" placeholder="名称" class="handle-input" clearable></el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="success" @click="addAmdin">添加</el-button>
          </el-col>
        </el-row>
  
  
        <el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column prop="id" label="ID" align="center"></el-table-column>
          <el-table-column prop="name" label="名称" align="center"></el-table-column>
          <el-table-column prop="statusName" label="状态" align="center"></el-table-column>
          <el-table-column prop="date" label="添加日期" align="center"></el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="query.pno" :page-size="query.size"
            :total="query.total" @current-change="handlePageChange"></el-pagination>
        </div>
  
      </div>
  
      <!-- 编辑弹出框 -->
      <el-dialog :title="title" v-model="editVisible" width="30%">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="名称">
            <el-input v-model="form.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" filterable clearable>
              <el-option :label="'正常'" value="0"> 正常</el-option>
              <el-option :label="'禁用'" value="1"> 禁用</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEdit">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { ElMessage } from "element-plus";
  
  export default {
    name: "bookList",
    data() {
      return {
        query: {
          pno: 1,  //当前页码
          total: 0,   //总共条数
          size: 4,   //每页多少条
          name: '', //搜索关键字
          status: ''
        },
        tableData: [],
        pageshow: true,
        editVisible: false,
        form: {},
        idx: -1,
        title: ''// 弹出框的标题
      }
    },
    created() {
      this.getData();
    },
  
    methods: {
      getData() {
        let that = this;
        this.$http.post("platform/find", this.query)
          .then(res => {
            console.log(res)
            that.tableData = res.data.records
            that.query.pno = Number(res.data.current)  //当前是第几页
            that.query.total = Number(res.data.total) //总共条数
            that.query.size = Number(res.data.size)//每页多少条
          })
      },
      // 编辑操作
      handleEdit(index, row) {
        this.idx = index;
        this.form = row;
        this.editVisible = true;
        this.title = '编辑'
      },
      // 保存编辑
      saveEdit() {
        let that = this;
        that.editVisible = false;
        let url = 'platform/addOrEdit'
        this.$http.post(url, this.form).then(
          res => {
            console.log(res)
            that.$message.success(res.msg);
            this.getData()
          }
        )
      },
      // 分页导航
      handlePageChange(val) {
        this.query.pno = val
        this.getData()
      },
      //搜索
      handleSearch() {
        this.getData()
      },
      // 添加管理员
      addAmdin() {
        this.editVisible = true;
        this.title = '添加'
        this.form = {}
      },
      // 删除操作
      handleDelete(index, row) {
        let that = this;
        // 二次确认删除
        this.$confirm("确定要删除吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            const data = { id: row.id }
            this.$http.post("platform/delete", data).then(res => {
              that.$message.success(res.msg);
              that.getData()
            })
  
          })
          .catch(() => {
          });
      },
    }
  }
  </script>
  
  <style scoped>
  .el-select {
    width: 100%;
  }
  
  .el-input {
    width: 100%;
  }
  
  .table {
    margin-top: 20px;
  }
  </style>
  